<html>
  <head>
    <title>FisheyeGl Demo</title>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <style>
      body {
        font-family: sans-serif;
        background : #efefef;
        color: #555;
      }
      canvas {
        float : left;
        background: black;
        margin-right: 20px;
        margin-bottom: 20px;
        max-width: 50%;
        min-width: 200px;
        min-height: 200px;
      }
      #grid {
        float : left;
        position: absolute;
        pointer-events: none;
        background: url('images/gridGuide.png');
        margin-right: 20px;
        min-width: 200px;
        min-height: 200px;
        opacity: 0.3;
      }
      dl input {
        width : 300px;
      }
      #display {
        padding: 10px;
        font-weight: bold;
      }
      #previous img {
        max-width: 20%;
        float: left;
        margin-right: 20px;
      }
    </style>
  </head>
  <body>
    <canvas width="800" height="600" id="grid"></canvas>
    <canvas width="800" height="600" id="canvas"></canvas>
    <p id="display">
      a: <span class="a"></span>,
      b: <span class="b"></span>,
      F: <span class="F"></span>,
      scale: <span class="scale"></span>,
      x: <span class="x"></span>,
      y: <span class="y"></span>
    </p>
    <p>Use the sliders to adjust the correction.</p>
    <dl>
      <dt>F</dt>
      <dd>
        <input id="F" type="range" min="0.0" max="4.0" value="1.0" step="0.01"/>
        <span id="F_label"></span>
      </dd>
      <dt>a</dt>
      <dd>
        <input id="a" type="range" min="0.0" max="4.0" value="1.0" step="0.001"/>
        <span id="a_label"></span>
      </dd>
      <dt>b</dt>
      <dd>
        <input id="b" type="range" min="0.0" max="4.0" value="1.0" step="0.001"/>
        <span id="b_label"></span>
      </dd>
      <dt>scale</dt>
      <dd>
        <input id="scale" type="range" min="0.0" max="20.0" value="1.0" step="0.001"/>
        <span id="scale_label"></span>
      </dd>
      <dt>fov x</dt>
      <dd><input id="fovx" type="range" min="0.0" max="2.0" value="1.0" step="0.001"/></dd>
      <dt>fov y</dt>
      <dd><input id="fovy" type="range" min="0.0" max="2.0" value="1.0" step="0.001"/></dd>
    </dl>
    <p>Drag a new image from your desktop onto the old one to run the correction on a new image. Right-click image to download.</p>
    <p>FisheyeGl is <a href="https://github.com/jywarren/fisheyegl">Open Source</a>. If you find the right settings for a particular camera or lens, <a href="https://github.com/jywarren/fisheyegl/issues/new">send them in</a> or email jeff@publiclab.org to get them added to a list of presets for a future "auto-correct" feature.</p>
    <hr style="clear:both;" />
    <h3>Previous images</h3>
    <div id="previous"></div>
    <script src="../dist/fisheyegl.js"></script>
    <script src="main.js"></script>
  </body>
</html>
